<template>
  <div id="app">
    <transition name="Main" mode="out-in">
      <router-view/>
    </transition>
    <kui-tabbar></kui-tabbar>
  </div>
</template>
<script>
  export default {
    name: 'App',
    components: {
    },
    props:{
    },
    data (){
      return {
      }
    },
    mounted() {
    }
  }
</script>
<style>
  @import "//at.alicdn.com/t/font_1155454_a6guf7agrur.css";
  @keyframes show {
    0% {
      opacity: 0;
      transform: translateX(100px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes hide {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .Main-enter-active {
    animation: show .5s;
  }
  .Main-leave-active {
    animation: hide .5s;
  }
  .Main-enter, .Main-leave-to {
    opacity: 0;
  }
</style>